<template>
  <div class="contentView" v-loading="formLoading" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-form ref="formRef" :model="formData" :inline="true" label-width="80px">
      <el-form-item label="产品编号" prop="productNumber">
        <el-input v-model="formData.productNumber" disabled />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input v-model="formData.productName" disabled />
      </el-form-item>
      <el-form-item label="部件类型" prop="partType">
        <el-input v-model="formData.partType" disabled />
      </el-form-item>
      <el-form-item label="图纸图号" prop="drawingNumber">
        <el-input v-model="formData.drawingNumber" disabled />
      </el-form-item>
      <el-form-item label="物料编号" prop="materialNumber">
        <el-input v-model="formData.materialNumber" />
      </el-form-item>
      <el-form-item label="物料名称" prop="materialName">
        <el-input v-model="formData.materialName" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 50px; display: flex; align-items: center">
      <el-button
        type="primary"
        @click="handleExport"
        :loading="exportLoading"
        v-hasPermi="['produce:steel-form:detail:export']"
      >
        数据导出
      </el-button>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="detailList"
      style="width: 100%"
      @selection-change="selectionChange"
      border
      :height="contentHeight - 213"
    >
      <el-table-column type="selection" width="55" fixed="left" align="center" />
      <el-table-column
        :property="item.val"
        :label="item.label"
        v-for="item in tableTitle"
        :key="item.val"
        :min-width="item.width"
        show-overflow-tooltip
        align="left"
        header-align="left"
      >
        <template #default="scope">
          <el-button
            v-if="item.label == '图纸图号'"
            type="primary"
            link
            @click="jumpPdfFile(scope.row[item.val],formData.productNumber)"
            >{{ scope.row[item.val] }}</el-button
          >
          <template v-else>{{ scope.row[item.val] }}</template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 导出 -->
    <ExportFile ref="exportRef" @download="downloadFun" />
  </div>
</template>
<script setup lang="ts">
   import download from '@/utils/download'
   import { jumpPdfFile } from '@/utils/formCreate'
   import * as SteelFormApi from '@/api/produce/workOrderManagement/steelForm'
   import { useTagsViewStore } from '@/store/modules/tagsView'
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
   const formData = ref({
     steelFormId: undefined,
     productNumber: undefined,
     productName: undefined,
     partType: undefined,
     drawingNumber: undefined,
     materialNumber: undefined,
     materialName: undefined
   })
   /**表头 */
   const tableTitle = ref([
     {
       label: '材料类别',
       val: 'materialCategory',
       width: 200
     },
     {
       label: '物料编号',
       val: 'materialNumber',
       width: 200
     },
     {
       label: '物料名称',
       val: 'materialName',
       width: 200
     },
     {
       label: '图纸图号',
       val: 'drawingNumber',
       width: 200
     },
     {
       label: '材质',
       val: 'material',
       width: 200
     },
     {
       label: '规格',
       val: 'specification',
       width: 200
     },
     {
       label: '单位',
       val: 'dictUnit',
       width: 200
     },
     {
       label: '下料总重(kg)',
       val: 'baitingTotalWeight',
       width: 200
     },
     {
       label: '工艺总重(kg)',
       val: 'processTotalWeight',
       width: 200
     },
     {
       label: '创建人',
       val: 'creatorName',
       width: 200
     },
     {
       label: '创建时间',
       val: 'createTime',
       width: 200
     }
   ])

   /**选中 */
   const selectList = ref([])
   const selectionChange = (data) => {
     selectList.value = data
   }

   /** 导出按钮操作 */
   const exportRef = ref()
   const handleExport = () => {
     exportRef.value.open()
   }
   // 导出
   const downloadFun = async () => {
     const val = exportRef.value.params
     let params = {
       fileName: val.name,
       steelFormId: formData.value.steelFormId,
       ids: ''
     }
     if (val.range === 'all') {
       params.ids = ''
     } else {
       params.ids = selectList.value.map((item) => item.id).join(',')
     }
     SteelFormApi.exportSteelFormDetail(params).then((res) => {
       download.excel(res, val.name)
       clearSelectData()
     })
   }

   //清空多选
   const multipleTableRef = ref()
   const clearSelectData = () => {
     selectList.value = []
     multipleTableRef.value.clearSelection()
   }
   /** 搜索按钮操作 */
   const handleQuery = () => {
     getDetailData()
   }

   /** 重置按钮操作 */
   const formRef = ref() // 表单 Ref
   const resetQuery = () => {
     formData.value.materialNumber = undefined
     formData.value.materialName = undefined
     getDetailData()
   }
   /**获取详情 */
   const detailList = ref([])
   const getDetailData = async (type?: string) => {
     formLoading.value = true
     const data = await SteelFormApi.getSteelForm(formData.value)
     detailList.value = data.details
     //初始化
     if (type && type == 'init') {
       const { productNumber, productName, partType, drawingNumber } = data
       formData.value = Object.assign(formData.value, {
         productNumber,
         productName,
         partType,
         drawingNumber
       })
     }
     formLoading.value = false
   }

   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     formRef.value.resetFields()
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/produce/produce/workOrderManagement/steelForm'
     })
   }
   const contentHeight = ref(0)
   const { query } = useRoute() // 路由的查询
   onMounted(async () => {
     if (query.id) {
       formData.value.steelFormId = query.id
       getDetailData('init')
       contentHeight.value = document.body.clientHeight - 127
     }
   })
</script>
<style scoped lang="scss">
   .contentView {
     padding: 10px;
     background: #fff;
   }
   .tableView {
     :deep(.el-input__wrapper) {
       box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
       cursor: default;
       .el-input__inner {
         cursor: default !important;
         text-align: center;
       }
     }
   }
</style>